import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import '../static/styles/footer.css';

class Footer extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (<div className='footer'>
            <Link to={`/index`}>
                {
                    this.props.active === 'index-active'
                    ?
                    <div className='footer-item active'>
                        <div className='footer-item-icon index'></div>
                        <div className='footer-item-text'>首页</div>
                    </div>
                    :
                    <div className='footer-item'>
                        <div className='footer-item-icon index'></div>
                        <div className='footer-item-text'>首页</div>
                    </div>
                }

            </Link>
            <Link to={`/center`}>
                {
                    this.props.active === 'center-active'
                    ?
                    <div className='footer-item active'>
                        <div className='footer-item-icon user'></div>
                        <div className='footer-item-text'>我的</div>
                    </div>
                    :
                    <div className='footer-item'>
                        <div className='footer-item-icon user'></div>
                        <div className='footer-item-text'>我的</div>
                    </div>
                }

            </Link>
        </div>);
    }
}

export default Footer;
